*{
  padding: 0;
  margin: 0;
}
i{
  font-style: normal;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
  color: #fff;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
html{
  font-size: 88px;
  color: #fff;
}
.w{
  margin:  0 auto;
  width: 12rem;
}
.head{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 9.2727rem;
  padding: .1364rem 4.0909rem;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: .1818rem;
  backdrop-filter: blur(30px);
}
.head .head-left{
  float: left;
}
.head .head-left img{
  width: 1.16rem;
  height: 0.44rem;
}
.head .head-right{
  float: right;
}
.head .head-right ul li{
  float: left;
  margin-left: 0.6rem;
  padding-top: 0.06rem;
}
.head .head-right ul li a{
  position: relative;
}
.head .head-right ul li:first-child a:after{
  content: '';
  display: block;
  position: absolute;
  left: 0.1rem;
  bottom: -0.12rem;
  width: calc(100% - 0.2rem);
  height: 0.06rem;
  background: #fff;
  border-radius: 100px;
  /* transition: background .4s ease 0s; */
}
.col{
  font-weight: 700;
}
.banner{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* background-image: url(../images/programme-img/banner1.png);
  background-repeat: no-repeat;
  background-size:cover; */
}
.banner>img{
  width: 100vw;
  height: 100vh;
}
.banner .txt{
  position: absolute;
  top: 33%;
  left: 18.75%;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.banner .txt img:nth-child(1){
  width: 9.4vw;
  height: auto;
}
.banner .txt img:nth-child(2){
  display: block;
  width: 35vw;
  height: auto;
  margin: 0.54rem 0 0.5rem;
}
.banner .txt img:nth-child(3){
  display: block;
  width: 20.2vw;
  height: auto;
}
.banner .monkey{
  position: absolute;
  left: 56%;
  bottom: 26.4%;
  width: fit-content;
  height: 35.65%;
  z-index: 2;
}
.banner .monkey img:nth-child(1){
  height: 100%;
  animation-name: change1;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.1);
  /* transition: all 1s;
  transform: translate(10px,10px); */
  /* animation: 8s cubic-bezier(0.25, 0.1, 0.25, 0.1) 0s infinite normal none running; */
}
.banner .monkey img:nth-child(2){
  position: absolute;
  top: -7.8%;
  left: -15%;
  width: 28.9%;
  height: 22%;
  animation-name: change2;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.1);
}
.banner .monkey img:nth-child(3){
  position: absolute;
  top: 100%;
  left: 18.9%;
  height: 88.8%;
  width: 110%;
}
.banner .star img{
  position: absolute;
  right: 0;
  bottom: 0;
  height: 38%;
  z-index: 3;
}
.banner .ray{
  position: absolute;
  left: -2.6rem;
  top: -0.2rem;
  width: 2.6rem;
  height: 0.08rem;
  background: linear-gradient(270deg,#5a4fd9,rgba(90,79,217,0));
  border-radius: 0.1rem;
  transform: rotate(90deg);
  z-index: 2;

  animation-name: change3;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: none;
  animation-timing-function: linear;
  animation-play-state: running;
}
.banner .ray.two{
  position: absolute;
  left: -4rem;
  top: 0px;
}
.part2{
  box-sizing: border-box;
  height: 10.9rem;
  min-height: 10.9rem;
  padding-top: 2.0455rem;
  background-image: url(../images/programme-img/bgim.png);
  background-size:cover;
}
.part2 .video{
  margin: 0 auto;
  width: 10.44rem;
  height: 5.8725rem;
}
video{
  border-radius: .2727rem;
  width: 100%;
  height: 100%;
}
.video{
  position: relative;
}
.part2 .video .showComplete{
  position: absolute;
  left: .2273rem;
  bottom: .2273rem;
  z-index: 3;
  display: flex;
  border-radius: 1rem;
  padding: 0.13rem 0.2rem;
  font-weight: 500;
  font-size: .16rem;
  line-height: .2rem;
  background: hsla(0,0%,100%,.6);
  color: #000;
  cursor: pointer;
}
.part2 .video .showComplete img{
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.08rem;
}
.part2 .introduction{
  margin: 0 auto;
  padding-top: .3977rem;
  width: 10.44rem;
}
.part2 .introduction h3{
  font-size: .44rem;
  font-weight: 600;
  line-height: 150%;
}
.part2 .introduction h3 span{
  font-size: .32rem;
}
.part2 .introduction p{
  margin-top: 0.3rem;
  font-size: .16rem;
  font-weight: 400;
  line-height: 150%;
}
.part3{
  box-sizing: border-box;
  padding-top: 1.1rem;
  height: 9.14rem;
  background-image: url(../images/programme-img/bgim2.png);
  background-size: 19.2rem 100%;
  background-position: 50%;
  margin: 0 auto;
}
.title{
  text-align: center;
  margin-bottom: 1.42rem;
  font-weight: 600;
}
.title p{
  font-size: .32rem;
  line-height: 1.4;
}
.title h3{
  font-size: .45rem;
  line-height: .63rem;
  font-weight: 600;
}
.part3 .w{
  display: flex;
  justify-content: space-between;
}
.part3 .card{
  /* display: table-cell; */
  position: relative;
  box-sizing: border-box;
  width: 2.8rem;
  height: 3.8rem;
  text-align: center;
  background-image: url(../images/programme-img/kjsn-bg1.png);
  background-size: contain;
  background-repeat: no-repeat;
  /* transition: all .2s; */
}
.part3 .card.active{
  width: 3rem;
  height: 4rem;
  transform: translateY(-20px);
}
.part3 .card>img{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.part3 .card>img:nth-child(3){
  transition: all .5s;
}
.part3 .card .card-hd{
  position: absolute;
  top: -32%;
  right: 7%;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  /* transform: translate(7%,-50%); */
}
.part3 .card .card-hd img{
  width: 100%;
}
.part3 .card .card-bd{
  position: relative;
  z-index: 5;
}
.part3 .card .card-bd .card-title{
  font-weight: 600;
  font-size: .24rem;
  line-height: 1.5;
  margin: 1.44rem auto 0;
}
.part3 .card .card-bd .card-content{
  font-weight: 400;
  font-size: .16rem;
  line-height: 1.5;
  padding: 0.16rem 0.24rem 0;
  text-align: justify;
}
.part3 .card .active .card-title{
  font-weight: 600;
  font-size: 0.24rem;
  color: rgb(14, 64, 254); 
  background: linear-gradient(225.23deg, rgb(232, 245, 255) 9.6%, rgb(255, 255, 255) 70.38%); 
  box-shadow: rgba(57, 120, 255, 0.3) 0px 0.04rem 0.14rem, rgba(17, 83, 254, 0.2) 0px -0.04rem 0.06rem inset; 
  padding: 0.06rem 0px;
  text-align: center;
  width: 1.36rem; 
  border-radius: .2727rem;
  box-sizing: border-box;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  margin-top: 1.38rem;
}
.part3 .card .active .card-content{
  font-weight: 500; 
  font-size: 0.16rem; 
  transform: scale(1.025); 
  transform-origin: center top; 
  padding: 0.2rem 0.34rem 0px; 
  text-shadow: rgba(0, 32, 255, 0.3) 0px 0.04rem 0.04rem; transition: transform 0.3s ease 0s;
}
.part3 .card .card-bd img{
  position: absolute;
  z-index: 10;
  width: 1.4rem;
  height: 1.4rem;
  bottom: -1rem;
  right: -0.2rem;
  transition: all .5s;
}
.part3 .card .card-bd img.move{
  transform: translate(15%,15%);
}




.part4{
  box-sizing: border-box;
  padding-top: 1.1rem;
  height: 9.12rem;
  background-image: url(../images/programme-img/bgim3.png);
  background-size: 19.2rem 100%;
  background-position: 50%;
}
.part4 .slide-list{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin:  0  auto;
  width: 12rem;
  /* display: table-cell; */
}
.part4 .slide-list .container{
  position: relative;
  overflow: hidden;
  width: 1.8rem;
  height: 4.8rem;
  border-radius: 0.16rem;
  transition: all .3s;
}
.no{
  display: none;
}
.part4 .slide-list .container .mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}
.mask2{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:linear-gradient(0deg, transparent, transparent) ;
  z-index: 20;
}
.part4 .container .text-wrap{
  position: absolute;
  bottom: 0;
  height: 1.4rem;
  width: 100%;
  background: linear-gradient(rgba(113, 78, 57, 0), rgba(113, 78, 57, 0.8));
  border-bottom-left-radius: 0.16rem;
  border-bottom-right-radius: 0.16rem;
  font-size: 0.28rem;
  line-height: 150%;
  padding: 0px 0.3rem;
}
.part4 .container .text-wrap h4{
  margin-top: 0.21rem;
  font-weight: 500;
}
.part4 .container .text-wrap p{
  font-weight: 400;
  font-size: 0.18rem;
  opacity: 0.8;
  margin-top: 0.08rem
}
.part4 .container .text-single{
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%;
  font-weight: 400;
  font-size: 0.24rem;
  line-height: 150%;
  padding: 0.2rem 0px 0.32rem 0.3rem;
  text-align: left;
  background: linear-gradient(rgba(113, 78, 57, 0), rgba(113, 78, 57, 0.8));
}
.part4 .container .text-single span{
  font-weight: 500;
    font-size: 0.3rem;
    line-height: 150%;
    margin-top: 0.06rem;
}
.part4 .slide-list img{
  height: 100%;
}
.part4 .slide-list .container:nth-child(1) img.zuo{
  margin-left: -1rem
}
.part4 .slide-list .container:nth-child(2) img.zuo{
  margin-left: -2rem
}
.part4 .slide-list .container:nth-child(3) img.zuo{
  margin-left: -2rem
}
.part4 .slide-list .container:nth-child(4) img.zuo{
  margin-left: -2rem
}
.part4 .slide-list .big{
  width: 5.88rem;
}
.part4 .mask .text-wrap{
  font-weight: 500;
  font-size: 0.28rem;
  line-height: 150%;
  padding: 0 0.3rem;
  transition: all 0.3s;
}




.part5{
  box-sizing: border-box;
  padding-top: 1.1rem;
  height: 9.12rem;
  background-image: url(../images/programme-img/bgim4\ .png);
  background-size: 19.2rem 100%;
  background-position: 50%;
  overflow: hidden;
}
.part5 .biaoti{
  padding: 1.1rem 0 1.02rem;
  font-weight: 600;
  font-size: 0.44rem;
  line-height: 150%;
  text-align: center;
}
.part5 .line{
  height: 0.02rem;
    background: linear-gradient(90deg, rgba(134, 138, 255, 0), rgba(134, 138, 255, 0.2) 26.88%, rgb(134, 138, 255) 50.28%, rgba(134, 138, 255, 0.2) 73.78%, rgba(134, 138, 255, 0));
}
.part5 .main{
  position: relative;
  padding-top: 0.3rem;
  top: -0.3rem;
}
.part5 .main .left{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  background-image: linear-gradient(to left,#0c0a30 , transparent,#0c0a30 );
  filter:alpha(opacity=50);
}
.part5 .main .hid{
  width: 19.2rem;
  overflow: visible;
  display: flex;
}
.part5 .sections{
  width: 4rem;
  display: flex;
  flex-direction: column;
}

.part5 .sections .icons img{
  display: block;
  position: absolute;
  width: 0.56rem;;
  height: 0.54rem;
  top: -0.29rem;

}
.part5 .sections .icons .dot{
  position: absolute; 
  top: -0.13rem; 
  width: 0.24rem; 
  height: 0.24rem; 
  border-radius: 50%; 
  background: rgb(170, 173, 255); 
  box-shadow: rgb(97, 102, 252) 0.05rem -0.06rem 0.1rem inset; 
}
.part5 .sections .year{
  margin: 0.41rem 0px 0.14rem;
  height: 0.36rem;
  font-weight: 600;
  font-size: 0.24rem;
  line-height: 150%;
}
.part5 .sections .tip{
  width: 3.2rem;
  padding-right: 0.8rem;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 150%;
}
.part5 .sections .tip p{
  padding-bottom: 0.8rem;
}




.part6{
  box-sizing: border-box;
  padding-top: 0.5rem;
  height: 9.12rem;
  background-image: url(../images/programme-img/bgim5.png);
  background-size: 19.2rem 100%;
  background-position: 50%;
  text-align: center;
}
.part6 h3{
  font-weight: 600;
  font-size: .44rem;
  line-height: 150%;
  margin-bottom: 1rem;
  text-align: center;
}
.part6 .logo{
  margin-top: 1rem;
}
.part6 .logo .logo-line{
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}
.part6 img{
  width: 2.8rem;
  height: 1.2rem;
  margin-right: 0.26rem;
}



.animation-show{
  position: fixed;
  left: 0;
  bottom: 0;
  height: 1.6rem;
  transition: opacity .3s ease .76s;
  opacity: 0;
  z-index: 999;
}
.animation-show img{
  display: block;
  width: 100%;
  height: 100%;
}


/* 底部 */
.footer{
  padding-bottom: 1.6rem;
  box-sizing: border-box;
  padding: 0.6rem 0;
  background: #070319;
}
.footer .footer-part1{
  position: relative;
  width: 10rem;
  margin:  0 auto;
}
.footer .footer-part1>img{
  display: block;
  width: 1.58rem;
  height: 0.48rem;
  /* vertical-align: text-top; */
}
.footer .footer-part1 .detail-container{
  padding-top: 0.24rem;
  font-weight: 400;
  font-size: .16rem;
  line-height: .24rem;
  vertical-align: text-top;
}
.footer  .email{
  margin-top: 0.2rem;
}
.footer .link-text{
  display: flex;
  margin-top: 0.24rem;
}
.footer .link-text a{
  display: inline-block;
  padding: 0.06rem 0.2rem;
  background: hsla(0,0%,100%,.1);
  border-radius: 0.18rem;
  font-size: .16rem;
  margin-right: 0.12rem;
  text-align: center;
}
.footer .link-text a:hover{
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}
.footer .gzh{
  position: absolute;
  top: 0;
  right: 0;
}
.footer .gzh span{
  display: block;
  font-weight: 600;
  font-size: .24rem;
  line-height: 150%;
}
.footer .gzh img{
  display: block;
  box-sizing: border-box;
  margin: 0.32rem 0 0.08rem;
  width: 0.98rem;
  height: 0.98rem;
  background: #fff;
  border-radius: 0.08rem;
}
.footer .gzh i{
  display: block;
  font-weight: 400;
  font-size: .16rem;
  line-height: .24rem;
  width: 1rem;
}
.footer .footer-part2{
  border-top: 0.01rem solid hsla(0,0%,100%,.2);
  margin: 0.6rem;
}
.footer .footer-part3{
  font-size: .12rem;
  color: #666;
  line-height: .16rem;
  text-align: center;
  white-space: nowrap;
  margin-top: 0.14rem;
  padding-bottom: 1.1rem;
}
.footer .footer-part3 span{
  padding: .0227rem;
}
.footer .footer-part3 .bottom{
  margin-top: 0.14rem;
}
.footer .footer-part3 a{
  color: #666;
}
.footer .footer-part3 a:hover{
  color: #fff;
}




@keyframes change1 {
  from{
    transform: translate(0);
  } 
  to{
      transform: translate(-20px,-20px);
  }
}
@keyframes change2 {
  from{
    transform: translate(0);
  } 
  to{
      transform: translate(-40px,-20px);
  }
}
@keyframes change3{
  0% {
    transform: translate(0px) rotate(36deg);
  }
  60% {
      transform: translate(80vw, 94vh) rotate(30deg);
  }
  100% {
      transform: translate(80vw, 94vh) rotate(30deg);
  }
}